// 订单详情页
import React,{useState} from 'react'
import { Button,Image,Card,Descriptions,Table } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import {useNavigate} from 'react-router-dom'
import './Orderdat.less'
function Orderdat(){
    const [name]=useState('TYZ')
    const [num]=useState(5)
    const [money]=useState(28.5)
    const [text]=useState('PC高档铝框拉杆箱TSA海关锁行李箱密码登机')
    const [state,setcolor]=useState(true)
    const navigate=useNavigate()
    const rowdata=JSON.parse(sessionStorage.getItem('rowdata')) 
    const img=sessionStorage.getItem('imgAddress')
    function setcol() {
        setcolor(false)
    }
    function fanhui(params) {
        sessionStorage.removeItem(rowdata)
        sessionStorage.removeItem(img)
        navigate('/home/order')
    }
    // 表格头
    const columns = [
        {
          title: '货品',
          dataIndex: 'rowdata.BuyDetail[0].name',
          align:'center',
          className:'tit',
          render: (text, record)=>
              <div style={{display:'flex',justifyContent:'space-around',alignItems:'center'}}>
                 <Image src={record.img} style={{width:'30px',height:'30px'}}></Image>
                 <span>{rowdata.BuyDetail[0].name}</span>
              </div>
        },
        {
          title: '单价',
          dataIndex: 'rowdata.BuyDetail[0].price',
          align:'center',
          render:()=><span>{rowdata.BuyDetail[0].price}</span>
        },
        {
          title: '数量',
          dataIndex: 'rowdata.BuyDetail[0].num',
          align:'center',
          render:()=><span>{rowdata.BuyDetail[0].num}</span>
        },
        {
          title: '运费金额',
          dataIndex: 'rowdata.BuyDetail[0].dcosts',
          align:'center',
          render:()=><span>{rowdata.BuyDetail[0].dcosts}</span>
        },
        {
          title: '实际付款',
          dataIndex: 'money',
          align:'center',
          render:()=><span>{rowdata.BuyDetail[0].pay}</span>
        },
        {
            title: '支付时间',
            dataIndex: 'rowdata.BuyDetail[0].OrderTime',
            align:'center',
            render:()=><span>{rowdata.BuyDetail[0].OrderTime}</span>
          },
          {
            title: '预估收益',
            dataIndex: 'rowdata.BuyDetail[0].price',
            align:'center',
            render:()=><span>{rowdata.BuyDetail[0].price}</span>
          },
      ];
    //   表格数据
      const data = [
        {
          key: '1',
          name: 'John Brown',
          sale: 32,
          count: '0571-22098909',
          freight: 18889898989,
          money: '你在哪万人中央感受万丈荣光',
          date:'2020-2-3',
          total:'20',
          img:img
        },
      ];
    return ( 
        <div className="mian">
            {/* 第一行 */}
            <div className="top">
                <Button type="primary" onClick={fanhui}>返回</Button>
                <div className="top1">
                    <span>订单列表</span> <RightOutlined />  <span>订单详情</span>
                </div>
                <div className="top2">
                    <div className="topimg">
                        <Image src={img} style={{borderRadius:'5px'}}></Image>
                    </div>
                    <span>{rowdata.BaseMessage.name}</span>
                    <span>购买{rowdata.BuyDetail[0].num}件</span>
                    <span>实付{rowdata.BuyDetail[0].pay}元</span>
                    <span>{rowdata.BuyDetail[0].name}</span>
                </div>
                <Button type="primary"  style={state?{backgroundColor: "#c6c2ff",borderStyle:'none',marginLeft:'10px',fontWeight:'bold'} : {backgroundColor: "#171c49",borderStyle:'none',cursor:'not-allowed',marginLeft:'10px',fontWeight:'bold'}} onClick={setcol}>{state?'失效':'通过'}</Button>
            </div>
            <Card type="inner" title="基本信息" headStyle={{fontWeight:'bold'}}>
                <div>
                    <Descriptions
                    bordered
                    column={{ xxl: 4, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }}
                    style={{width:'50%'}}
                    size="small"
                    >
                    <Descriptions.Item label="订单状态" labelStyle={{width:'30%'}}>{rowdata.BaseMessage.systemStatus}</Descriptions.Item>
                    <Descriptions.Item label="结算状态">{rowdata.BaseMessage.moneyStatus==1?'待结算':'已结算'}</Descriptions.Item>
                    <Descriptions.Item label="订单编号">{rowdata.BaseMessage.orderId}</Descriptions.Item>
                    <Descriptions.Item label="支付下单时间">{rowdata.BuyDetail[0].OrderTime}</Descriptions.Item>
                    <Descriptions.Item label="买家id/名称">{rowdata.BaseMessage.name}</Descriptions.Item>
                    <Descriptions.Item label="联系方式">{rowdata.BaseMessage.phone}</Descriptions.Item>
                    </Descriptions>
               </div>
            </Card>
            <Card type="inner" title="购买详情" headStyle={{fontWeight:'bold'}}>
                    <Table columns={columns} dataSource={data.length!==0?data:''} bordered pagination={false}/>
            </Card>
            <Card type="inner" title="收件人信息" headStyle={{fontWeight:'bold'}}>
                <div>
                    <Descriptions
                    bordered
                    column={{ xxl: 4, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }}
                    style={{width:'50%'}}
                    size="small"
                    >
                    <Descriptions.Item label="收货人" labelStyle={{width:'30%'}}>{rowdata.Buyer.name}</Descriptions.Item>
                    <Descriptions.Item label="收货地址">{rowdata.Buyer.address}</Descriptions.Item>
                    <Descriptions.Item label="联系方式">{rowdata.Buyer.phone}</Descriptions.Item>
                    </Descriptions>
               </div>
            </Card>
            <Card type="inner" title="快递信息" headStyle={{fontWeight:'bold'}}>
                <div>
                    <Descriptions
                    bordered
                    column={{ xxl: 4, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }}
                    style={{width:'50%'}}
                    size="small"
                    >
                    <Descriptions.Item label="快递公司" labelStyle={{width:'30%'}}>{rowdata.PostMessage.company}</Descriptions.Item>
                    <Descriptions.Item label="快递单号">{rowdata.PostMessage.postId}</Descriptions.Item>
                    <Descriptions.Item label="发货时间">{rowdata.PostMessage.DeliverTime}</Descriptions.Item>
                    <Descriptions.Item label="快递明细">{rowdata.PostMessage.postDetail}</Descriptions.Item>
                    </Descriptions>
               </div>
            </Card>
        </div>
    )
}
export  default Orderdat; 


